<template>
  <div class="myLimit">
    <div class="nowjob">
      <el-row class="nowjobNav">
        <el-col :lg="{span:15,offset:9}"
                :md="{span:17,offset:7}"
                :sm="{span:20,offset:4}"
                :xs="{span:22,offset:2}"
                class="pull-right"
                align="right">
          <span class="jobTips">当前岗位</span>
          <el-select v-model="jobvalue"
                     @change="changePost"
                     placeholder="请选择岗位">
            <el-option v-for="item in postList"
                       :key="item.job_id"
                       :label="item.job_name"
                       :value="item.job_id">
            </el-option>
          </el-select>

        </el-col>
      </el-row>
    </div>
    <el-tabs type="border-card"
             class="unit_tabs">
      <el-tab-pane label="权限清单">
        <el-row class="table-container"
                style="margin-bottom:15px;">
          <el-col class="table-content"
                  :span="24">
            <el-table ref="clearTable"
                      :highlight-current-row="true"
                      :header-cell-style="{background:'#f5f5f5'}"
                      :data="jobPermissionList.list"
                      border
                      class="obs-style">
              <el-table-column type="index"
                               label="序号"
                               sortable
                               align="center"
                               width="100"
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="system_name"
                               label="所属应用"
                               align="center"
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="object_name"
                               label="权限名称"
                               align="center"
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="typeName"
                               label="类型"
                               align="center"
                               show-overflow-tooltip>
              </el-table-column>

              <!-- <el-table-column label="操作"
                               align="center">
                <template slot-scope="scope">
                  <el-button width="80px"
                             size="mini"
                             @click="jobPerDeleteConfirm(scope)"
                             type="text">
                    删除
                  </el-button>
                </template>
              </el-table-column> -->
            </el-table>
          </el-col>
          <el-col :span="24"
                  align="center"
                  style="margin-bottom:20px;">
            <el-pagination background
                           id="obs_page"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="jobPermissionListParam.page"
                           :page-size="jobPermissionListParam.page_size"
                           :page-sizes="[10]"
                           layout="total,sizes,prev, pager, next, jumper"
                           :total="jobPermissionList.total_count">
            </el-pagination>
          </el-col>
        </el-row>
      </el-tab-pane>
      <!-- 轻应用权限 -->
      <el-tab-pane label="轻应用权限">
        <el-form ref="form"
                 :model="form"
                 label-width="100px">
          <el-row style="margin-bottom:15px"
                  class="table-container11">
            <el-col :span="24">
              <el-table ref="obsTable"
                        :highlight-current-row="true"
                        :header-cell-style="{background:'#f5f5f5'}"
                        :data="applimit.list"
                        border
                        height="280"
                        class="obs-style">
                <el-table-column prop="app_name"
                                 label="轻应用名称"
                                 align="center"
                                 show-overflow-tooltip>
                </el-table-column>
                <!-- <el-table-column label="操作"
                                 align="center">
                  <template slot-scope="scope">
                    <el-button width="80px"
                               size="mini"
                               @click="appLimitDeleteConfirm(scope.row)"
                               type="text">
                      移除
                    </el-button>
                  </template>
                </el-table-column> -->
              </el-table>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
                    align="center"
                    style="margin-bottom:20px;">
              <el-pagination background
                             id="obs_page"
                             @size-change="handleAppSizeChange"
                             @current-change="handleAppCurrentChange"
                             :current-page="getAppLimitParam.page"
                             :page-sizes="[10]"
                             layout="total,sizes,prev, pager, next, jumper"
                             :page-size="getAppLimitParam.page_size"
                             :total="applimit.total_count">
              </el-pagination>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { personalCenterApi } from '@/services/PersonalCenter'
import { organizationApi } from '@/services/CompanySetting'
import { standardCodeApi } from '@/services/StandardCode'
export default {
  data () {
    return {
      postList: [],
      jobvalue: '',
      form: {},
      //轻应用权限列表
      applimit: {
        list: [],
        total_count: 0,
        total_page: 0
      },
      //轻应用权限请求参数
      getAppLimitParam: {
        job_id: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },
      companyName: '',
      // 组织管理树数据
      orgainzationTreeData: [],
      // 获取岗位权限清单列表参数
      jobPermissionListParam: {
        job_id: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },
      // 岗位权限清单列表
      jobPermissionList: {
        list: [],
        total_count: 0,
        total_page: 0
      },
      TypeList: [],
      typeName: []
    }
  },
  created () {
    this.getPost()
    this.getTypeCode()
  },
  mounted () { },
  methods: {
    // 获取类型标准码
    getTypeCode () {
      return standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'object_sort'
        }
      }).then(res => {
        if (res.code === 0) {
          console.log(res.data);
          this.TypeList = res.data.list
        }
      })
    },
    //当前岗位
    getPost () {
      personalCenterApi.getPostList({
        params: {
          is_page: 0
        }
      }).then(res => {
        this.postList = res.data.list
      }, err => {
        console.log(err);
      })
    },
    // 获取岗位权限清单列表数据
    getJobPermissionList () {
      this.typeName = []
      organizationApi.getJobList({
        params: this.jobPermissionListParam
      }).then(res => {
        if (res.code === 0) {
          this.jobPermissionList = res.data
          this.TypeList.forEach(item => {
            this.jobPermissionList.list.forEach(item2 => {
              if (item.value === item2.object_sort) {
                item2.typeName = item.name
              }
            })
          })
          // console.log(this.jobPermissionList);
        }
      })
    },
    //获取轻应用列表
    getLightappList () {
      organizationApi.getLightappList({
        params: this.getAppLimitParam
      }).then(res => {
        if (res.code === 0) {
          this.applimit = res.data
        }
      })
    },
    changePost (val) {
      this.jobPermissionListParam.job_id = val
      this.getAppLimitParam.job_id = val
      this.getJobPermissionList()
      this.getLightappList()
    },
    //轻应用权限-每页条数
    handleAppSizeChange (page) {
      this.getAppLimitParam.page_size = page
    },
    //轻应用权限-页码
    handleAppCurrentChange (page) {
      this.getAppLimitParam.page = page
    },
    //轻应用权限-移除按钮
    appLimitDeleteConfirm (row) {
      this.$confirm('是否删除该权限清单？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        organizationApi.deleteAppList({
          data: {
            job_id: row.job_id,
            app_id: row.app_id
          }
        }).then(res => {
          if (res.code === 0) {
            this.$message.success('删除轻应用成功')
            this.getLightappList()
          }
        })
      })
    },
    // 权限清单分页功能
    handleSizeChange (current) {
      this.jobPermissionListParam.page_size = current
      this.getJobPermissionList()
    },
    //权限清单分页
    handleCurrentChange (current) {
      // console.log(current, 'current change')
      this.jobPermissionListParam.page = current
      this.getJobPermissionList()
    },
  },
  computed: {},
  watch: {}
}
</script>

<style lang="scss" scoped>
.nowjobNav {
  display: flex;
  padding: 20px;
  .jobTips {
    padding: 20px;
  }
}
@media screen and (max-width: 780px) {
  .jobTips {
    font-size: 15px;
  }
}
</style>
